$page-margin-y = 20px
$page-margin-x = 20px

$width = "calc(50vw - (%s))" % $page-margin-x
$half-width = "calc(50vw - (%s))" % ($page-margin-x / 2)
$neg-half-width = "calc(-25vw + %s)" % ($page-margin-x / 2)

$height = "calc(100vh - %s)" % ($page-margin-y * 2)
$half-height = "calc(50vh - %s)" % $page-margin-y
$neg-half-height = "calc(-50vh + %s)" % $page-margin-y

$transition-dur = 1s

html
body
    height: 100%
    padding: 0
    margin: 0

body
    background: #fff
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif

// -- Carousel

.js-transitions-disabled *
    transition: none !important

.carousel
    position: relative
    height: 100%
    overflow: hidden
    perspective: 50vw
    perspective-origin: 50% 50%

.carousel__control
    position: absolute
    height: 160px
    width: 40px
    background: #fff
    right: 0
    top: 0
    bottom: 0
    margin: auto
    z-index: 1

    a
      position: relative
      display: block
      width: 100%
      padding-top: 75%
      box-sizing: border-box

      &:hover:before
        background-color: rgba(0, 0, 0,0.4)

      &.active:before
      &.active:hover:before
        background-color: rgba(0, 0, 0,0.6)

      &:first-child
        margin-top: 15px

      &:before
        position: absolute
        top: 50%
        left: 0
        right: 0
        margin: auto
        border-radius: 50%
        padding-top: 25%
        width: 25%
        background: rgba(0, 0, 0, 0.2)
        content: ''
        display: block
        margin-top: -12.5%

.carousel__stage
    position: absolute
    top: $page-margin-y
    bottom: $page-margin-y
    left: $page-margin-x
    right: $page-margin-x
    margin: auto
    transform-style: preserve-3d
    transform: translateZ($neg-half-height)

.spinner
    position: absolute
    width: $width
    height: $height
    top: 0
    left: 0
    right: auto
    bottom: 0
    margin: auto
    transform-style: preserve-3d
    transition: transform $transition-dur
    backface-visibility: hidden
    transform-origin: 50% 50%
    transform: rotateX(0)

    .js-spin-fwd &
        transform: rotateX(-90deg)

    .js-spin-bwd &
        transform: rotateX(90deg)

.spinner--right
    .js-spin-fwd &
        transform: rotateX(90deg)

    .js-spin-bwd &
        transform: rotateX(-90deg)

.spinner--right
    right: 0
    left: auto

.spinner__face
    display: none
    position: absolute
    width: 100%
    height: 100%
    overflow: hidden

    &.js-next
        display: block
        transform: rotateX(90deg) translateZ($half-height)

        .spinner--right &
            transform: rotateX(270deg) translateZ($half-height)

    .js-spin-bwd &
      &.js-next
        transform: rotateX(-90deg) translateZ($half-height)

.js-spin-bwd
    .spinner--right
        .spinner__face.js-next
            transform: rotateX(-270deg) translateZ($half-height)

.js-active
    display: block
    transform: translateZ($half-height)

// -- Content

.content
    position: absolute
    width: 200%
    height: 100%
    left: 0

    .spinner--right &
        left: -100%

.content__left
.content__right
    position: absolute
    left: 0
    top: 0
    width: 50%
    height: 100%

.content__right
    right: 0
    left: auto

.content__left
    background-repeat: no-repeat
    background-size: cover

    &:after
        position: absolute
        display: block
        content: ""
        width: 100%
        height: 100%
        background-color: rgba(0, 0, 0, 0.1)

    h1
        position: absolute
        top: 50%
        margin-top: -3vw
        text-align: center
        font-family: oswald
        font-size: 5vw
        height: 10vw
        opacity: 1
        color: #fff
        width: 100%
        letter-spacing: 0.15em
        line-height: 0.6

    span
        font-size: 1vw
        font-weight: 300
        letter-spacing: 0.2em
        opacity: 0.9
        font-family: Merriweather

.content__right
    display: flex
    align-items: center
    justify-content: center

    .content__main
        position: absolute
        font-family: Merriweather, serif
        text-align: left
        color: #fff
        font-size: 1.3vw
        padding: 0 8vw
        line-height: 1.65
        font-weight: 300
        margin: 0
        opacity: 0.8

        p:last-child
          // font-style:italic
          text-transform: uppercase
          letter-spacing: 0.15em
          font-size: 0.85em

    .content__index
        font-size: 30vh
        position: absolute
        right: -1vh
        top: 35vh
        opacity: 0.04
        font-family: oswald
        color: #fff

[data-type="iceland"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/iceland.jpg')

        .spinner--right &
            background-image: none

[data-type="china"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/china.jpg')

        .spinner--right &
            background-image: none

[data-type="usa"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/usa.jpg')

        .spinner--right &
            background-image: none

[data-type="peru"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/peru.jpg')

        .spinner--right &
            background-image: none
